<template>
  <view class="pb-60">
    <view v-if="active_tag==0">
      <view class="info u-border-bottom">
        <span class="info-title">商家名称：</span>
        <u-input class="info-input" v-model="businese_name" />
      </view>
      <u-cell-item title="所在城市" class="active" :value="select_tips" @click="show=true"></u-cell-item>

      <view class="info u-border-bottom">
        <span class="info-title">详细地址：</span>
        <u-input class="info-input" v-model="address"  />
      </view>

      <view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
      <view class="info u-border-bottom">
        <span class="info-title">店主名称：</span>
        <u-input class="info-input" v-model="contact" />
      </view>
<!--      <view class="info u-border-bottom">-->
<!--        <span class="info-title">身份证号：</span>-->
<!--        <u-input class="info-input" v-model="id_card" />-->
<!--      </view>-->
      <view style="padding: 26rpx 32rpx;display: flex;flex-direction: row" class="u-border-bottom">
        <span style="width: 25%;height: 70rpx;line-height: 70rpx;font-weight: bold">联系方式：</span>
        <u-input style="width: 75%;height: 70rpx" v-model="contact_phone" />
      </view>
      <view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
      <view class="mlr-36">
        <view class="mt-40 size-32">
          上传证件
        </view>
        <view class="img text-center mt-30">
          <image :src="img_url" mode="" @click="chooseImg"></image>
        </view>
        <view class="size-28 text-center mt-10">
          点击上传<text class="ml-10" style="color: #FF5C50;">工商营业执照</text>
        </view>
      </view>
      <view class="center mt-40">
        <view class="radio center">
          <view class="radio-circle">

          </view>
        </view>
        <view class="size-26 ml-10">
          阅读并同意商家服务须知
        </view>
      </view>
      <u-button type="primary" :disabled="!businese_name || !province || !contact || !contact_phone || !img_id" class="mt-60" @click="submit">提交审核</u-button>
      <!-- 选择地区 -->
      <u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
    </view>
  </view>
</template>

<script>
import {upload} from '../../common/common.js'
import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
export default {
  data() {
    return {
      img_url:'../../static/model-yyzz.png',
      img_id:0,
      show:false,
      submitbtn:true,
      businese_name:'',
      address:'请选择',//居住地
      contact:'',
      id_card:'',
      contact_phone:'',
      province:'',
      city:'',//报名城市
      area:'',
      select_tips:'请选择',
      price:99.00,
      active_tag:0,
      allUserInfo:''
    }
  },
  components: {
    plateInput
  },
  onLoad() {
    uni.$on('brand',res=>{
      console.log(res);
      this.brand = res.brand
      this.name = res.name
      this.model = res.brand + ' ' + res.name
      this.isbrand = false
    })
  },
  onShow(){
    this.getUserInfo()
  },
  methods: {
    getUserInfo(){
      this.$http('/api/ucenter/getUserInfo',{}, "GET").then(res => {
        this.allUserInfo = res
        if (res.shop_auth == 0){
          this.active_tag=1
        }else if(res.shop_auth == 2){
          this.active_tag=2
        }else if(res.shop_auth == 1){
          this.active_tag=3
        }
      })
    },
    confirm(e){
      this.province = e.province.label
      this.city     = e.city.label
      this.area     = e.area.label
      if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
        this.select_tips = e.province.label + '-' + e.area.label
      }else{
        this.select_tips = e.province.label + '-' + e.city.label + '-' + e.area.label
      }
    },
    chooseImg(){
      upload().then(data=>{
        console.log(data)
        this.img_id = data[0].img_id
        this.img_url = data[0].img_url
      })
    },
    submit(){
      if(this.submitbtn == true){
        this.submitbtn = false
        this.$http('/api/ucenter/setBusinessAuthInfo',{
          name: this.businese_name,
          province: this.province,
          city: this.city,
          area: this.area,
          address: this.address,
          contact: this.contact,
          contact_phone: this.contact_phone,
          business_license_img_id: this.img_id
        },"POST").then(data=>{
          // this.$store.dispatch('updateUserInfo')
          uni.showToast({
            title: '提交成功,请耐心等待',
            icon:'none'
          })
          setTimeout(()=>{
            uni.navigateBack({})
          },1000)
        }).catch(data=>{
          this.submitbtn = true
        })
      }
    },
    buildOrder(){
      // const _this = this
      this.$http('/api/ucenter/buildVipOrder', {}, "POST").then(res => {
        this.pay(res.order_num);
      });
    },
    pay(orderNum){
      console.log(orderNum)
      try {
        uni.showLoading({
          title: '准备支付中',
          mask: true
        });
        this.$http('/api/payment/weChatPayment', {
          order_num: orderNum,
        }, "POST").then(data => {
          const _this = this
          this.$JSSDK.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timeStamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ["chooseWXPay"]
          })
          this.$JSSDK.ready(function () {
            _this.$JSSDK.chooseWXPay({
              appId: data.appId,
              timestamp: data.timeStamp,
              nonceStr: data.nonceStr,
              package: data.package,
              signType: data.signType,
              paySign: data.paySign,
              success: function (res) {
                uni.hideLoading()
                showToast('支付成功', 'success');
                _this.qiangDan(_this.order_id)
                // _this.handleRecordList()
              },
              fail: function (error) {
                console.error(error)
                uni.hideLoading()
                showToast('支付失败', 'none')
              }
            })
          })

        });
      } catch (err) {
        showToast("支付失败", "none");
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.u-btn{
  height: 96rpx !important;
}

/deep/.u-primary-hover {
  background-color: $blue !important;
}

/deep/.u-btn--primary--disabled {
  background-color: $bg-1 !important;
}
.active{
  /deep/.u-cell__value {
    color: $gray !important;
  }
}
.input{
  input{
    text-align: right;
    font-size: 26rpx;
  }
}
.img{
  image{
    width: 398rpx;
    height: 254rpx;
  }
}
.radio{
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 1rpx solid #999;
  .radio-circle{
    width: 22rpx;
    height: 22rpx;
    background: $blue;
    border-radius: 50%;
  }
}

.info{
  padding: 26rpx 32rpx;display: flex;flex-direction: row;

  .info-title{
    width: 25%;height: 70rpx;line-height: 70rpx;font-weight: bold;
  }
  .info-input{
    width: 75%;height: 70rpx;
  }
}

/deep/.u-primary-hover {
  background: linear-gradient(to right,#00b6b4,#00d496) !important;
}
/deep/.u-radio {
  display: flex;
  flex-direction: row-reverse;
}

/deep/.u-radio-group {
  width: 100% !important;
}

/deep/.u-radio__label {
  width: 100%;
}
</style>
